/*
* @Author: huangchengdu
* @Date:   2017-01-19 15:13:27
* @Last Modified by:   huangchengdu
* @Last Modified time: 2017-01-19 15:44:44
*/

.cude{
	width: 300px;
	height: 300px;
	position: relative;
	margin: 100px auto;
	background-color: #dfdfdf;
	transform-style: preserve-3d;
	-webkit-transform-style:preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
    transform-origin: 50% 50% 0;
    -webkit-transform-origin: 50% 50% 0;
    -webkit-animation: rotate 20s infinite;
    animation: rotate 20s infinite;
}

.surface{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background: #666;
	opacity:0.8;
	font-size: 60px;
	text-align: center;
	line-height: 300px;
	font-weight: bold;
	color: #fff;
	border: 1px solid #fff;
	-webkit-transition:all .3s;
	transition: all .3s;
}

@-webkit-keyframes rotate{
	from{
		transform: rotateX(0deg) rotateY(0deg);
	}
	to{
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.front{
	transform: rotateY(0) translateZ(150px);
}
.back {
    transform:translateZ(-150px) rotateY(180deg);
}
.left {
    transform:rotateY(-90deg) translateZ(150px);
}
.right {
    transform:rotateY(90deg) translateZ(150px);
}
.top {
    transform:rotateX(90deg) translateZ(150px);
}
.bottom {
    transform:rotateX(90deg) translateZ(-150px);
}